<query-editor-row query-ctrl="ctrl" class="generic-datasource-query-row" has-text-edit-mode="true">
  <div class="gf-form-inline">
    <div class="gf-form">
      <label class="gf-form-label query-keyword width-9">Namespace</label>
      <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
        <gf-cascader
          ng-if="ctrl.isCascader"
          style="width: 160px"
          change-on-select="false"
          options="ctrl.cascaderOptions"
          on-select="ctrl.cascaderChange(_query)"
          initial-value="{{ctrl.target.namespace}}"
        ></gf-cascader>

        <gf-form-dropdown
          ng-if="!ctrl.isCascader"
          model="ctrl.target.namespace"
          lookup-text="true"
          get-options="ctrl.getNamespaces($query)"
          on-change="ctrl.onNamespaceChange()"
          css-class="min-width-10"
        >
        </gf-form-dropdown>
      </div>
    </div>
  </div>

  <div class="gf-form-inline" ng-if="!ctrl.hideRegion">
    <div class="gf-form">
      <label class="gf-form-label query-keyword width-9">Region</label>
      <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
        <gf-form-dropdown
          model="ctrl.target[ctrl.target.service].region"
          allow-custom="true"
          lookup-text="true"
          get-options="ctrl.getRegions($query)"
          on-change="ctrl.onRegionChange()"
          css-class="min-width-10"
          disabled
        >
        </gf-form-dropdown>
      </div>
    </div>
  </div>

  <div class="gf-form-inline">
    <div class="gf-form">
      <label class="gf-form-label query-keyword width-9">MetricName</label>
      <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
        <gf-form-dropdown
          model="ctrl.target[ctrl.target.service].metricName"
          allow-custom="true"
          lookup-text="true"
          get-options="ctrl.getMetrics($query)"
          on-change="ctrl.onMetricChange()"
          css-class="min-width-10"
        >
        </gf-form-dropdown>
      </div>
    </div>
    <div class="gf-form gf-form-label--grow" ng-if="!!ctrl.getMetricNameDesc()">
      <label class="gf-form-label gf-form-label--grow">({{ctrl.getMetricNameDesc()}})</label>
    </div>
  </div>

  <div class="gf-form-inline" style="align-items: center">
    <div class="gf-form">
      <label class="gf-form-label query-keyword width-9">Period</label>
      <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
        <select
          class="gf-form-input min-width-10"
          ng-change="ctrl.refresh()"
          ng-model="ctrl.target[ctrl.target.service].period"
          ng-options="f for f in ctrl.sortedPeriodList"
        ></select>
      </div>
    </div>
    <span style="margin-left: 8px; font-size: 12px">(时间单位：秒)</span>
  </div>

  <div class="gf-form-inline">
    <div class="gf-form">
      <label class="gf-form-label query-keyword width-9">Instance</label>
      <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
        <select
          class="gf-form-input min-width-8"
          ng-change="ctrl.onInstanceAliasChange()"
          ng-model="ctrl.target[ctrl.target.service].instanceAlias"
          ng-options="f.value as f.text for f in ctrl.instanceAliasList"
        ></select>
      </div>
      <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
        <gf-form-dropdown
          model="ctrl.target[ctrl.target.service].instance"
          allow-custom="true"
          lookup-text="true"
          get-options="ctrl.getInstances($query)"
          on-change="ctrl.onInstanceChange()"
          css-class="min-width-10"
        >
        </gf-form-dropdown>
      </div>
    </div>
    <div class="gf-form" ng-if="!ctrl.isVariable('instance')">
      <label class="gf-form-label width-7">Show Details</label>
      <gf-form-switch
        class="gf-form tc-switch"
        label-class="width-7"
        checked="ctrl.target.showInstanceDetails"
        switch-class="max-width-5"
      ></gf-form-switch>
    </div>
    <div class="gf-form gf-form-label--grow">
      <!-- this is explain how much items will display to user -->
      <label class="gf-form-label gf-form-label--grow">(按照具体的查询条件搜索实例，默认拉取前 20 条实例)</label>
    </div>
  </div>
</query-editor-row>
